/*
Name: CSS for MStickers (HTML5). This basic template works fairly well.
Date: September 2012
Description: Sample layout for MStickers home site, using HTML5 and CSS3.
Version: 1.0
Author: Héctor E. Balaguer
*/
 
/* Imports */
/* 2 imports at the beginning of the file.
   The first one is Eric Meyer’s CSS reset file (The goal of a reset stylesheet is to reduce browser inconsistencies
   in things like default line heights, margins and font sizes of headings, and so on). 
   Second one is a personalized global forms file.
*/
@import url("reset.css");
/*@import url("global-forms.css");*/
 
/* ENABLING HTML5*/ 

/*Perhaps it’s fair to assume that most browsers apply something like 
 display: inline for all unknown tags that they might encounter. This is not what
 we want for some of them, such as <section>, so we need to tell explicitly to the
 browser how to display these elements:*/

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
    display: block;
}
/*There! Now we can magically style our tags as if they were <div>s!*/

/*LIMITING OUR BLOCKS*/
/*Some of you might have noticed how I added the class="body" attribute to the 
 major sections of the layout in the markup. This is because we want the body of
 my website to be for a certain width (800px), and I’ve never been a fan of the 
 big wrapping <div> to do that. So we’ll use the basic block centering technique 
 using margins for this. I’m also adding a couple of generic classes to this section
 that might be used for a post side content.*/

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

/***** Global *****/
/* Body */
body {
    background: #efeee9;
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
}
 
/* Headings */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}	/* 14px */
 
h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}
 
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #C74350;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active {
	background-color: #C74350;
	color: #fff;
	text-decoration: none;
        
        /* This will give us a #333 shadow on our text that’s 1px to the right, 
        5px down and with a 2px blur */
	text-shadow: 1px 1px 1px #333;
}
 
/* Paragraphs */
p {margin-bottom: 1.143em;}

/*This line will remove the margin bottom of any <p> tag that’s the last child 
 of it’s parent. Useful when using boxes (like we’re doing) to avoid large 
 vertical gaps.*/
* p:last-child {margin-bottom: 0;}
 
strong, b {font-weight: bold;}
em, i {font-style: italic;}
 
/*::selection is a CSS3 selector that lets us style how the text selection looks. 
 It only allows color and background CSS properties, so keep it simple. 
 ::-moz-selection needs to go here since Mozilla haven’t implemented the 
 ::selection selector.*/
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
 
/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}
 
ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}
 
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
 
/* Quotes */
blockquote {font-style: italic;}
cite {}
 
q {}
 
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
 
/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}

/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}

tbody .alt td {}
tbody .alt th {}

/* Tfoot */
tfoot th {}
tfoot td {}
